<template>
  <div class="body">
    <div class="nav-bar">
        <div class="text-btn" @click="edit">编辑</div>
		<image src="../../static/my/dots.png" mode="" @click="goPage('/pages/settings/index')"></image>
        <!-- <img src="../../assets/icon/bottom.png" alt=""> -->
    </div>
    <div class="card">
      <image class="head-img" src="../../static/common/logo.png" alt=""></image>
      <div class="content">
        <div class="content-name">
          <text>River</text>
		   <image class="content-vip" src="../../static/common/vip.png" mode=""></image>
          <!-- <div class="content-vip"> -->
			  <!-- <image src="../../static/common/vip.png" mode=""></image> -->
            <!-- <img src="../../assets/icon/arrow-up-bold.png" alt="">
            VIP -->
          <!-- </div> -->
        </div>
        <div class="content-info">
			<!-- 男 -->
			<image src="../../static/common/male.png" mode=""></image>
			<!-- 女 -->
			<!-- <image src="../../static/common/male.png" mode=""></image> -->
          <!-- <img src="../../assets/icon/arrow-up-bold.png" alt=""> -->
          <text>24/155cm/50kg • 北京</text>
        </div>
      </div>
    </div>

    <div class="word-text mb45">
      本人河南禹州88年身高170CM 体重53KG长相一般不丑不邋遢，本人河南禹州88年身高展开
    </div>
<!--    @click="goPage('/pages/my/vipPage')"-->
    <vipCard  @go="goFollow">

    </vipCard>

    <div class="mt30">
      <u-tabs lineWidth="33.3" :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
          }"
              lineColor="#fff"
              :itemStyle="itemStyles"
              :list="tabs"
              @click="click"></u-tabs>
    </div>
    <div>
<!--      <u-empty mode="message" :icon="icon"></u-empty>-->
      <photoList ></photoList>
    </div>
  </div>
</template>


<script>
import vipCard from "@/pages/my/components/vipCard";
import photoList from "@/pages/my/components/photoList";
export default {
  components: {
    vipCard,
    photoList
  },
  data() {
    return {
      tabs: [{
        name: '相册',
      }, {
        name: '动态',
      }, {
        name: '资料'
      }],
      itemStyles:{
        width: '33.3%',
        boxSizing: 'border-box',
        height: '100rpx',
      },
      icon:require('../../static/common/empty.png'),

    }
  },

  methods: {
    click(index) {
      console.log(index)
    },
    edit() {
      uni.navigateTo({
        url: '/pages/my/changeInfo'
      })
    },
    goFollow(type) {
      uni.navigateTo({
        url: '/pages/my/follow?type='+type,

      })
    },
    goPage(page) {
      uni.navigateTo({
        url: page,

      })
    }
  },

}
</script>
<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.body{
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.nav-bar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 44px;
  background-color: #fff;
  image{
    width: 34rpx;
    height: 14rpx;
    margin-right: 20rpx;
  }
}
.text-btn{
  width: 128rpx;
  height: 55rpx;
  border-radius: 27.5rpx;
  opacity: 1;
  border: 2rpx solid #7355ff;
    width: 90rpx;
    height: 42rpx;
    color: #7355ff;
    text-align: center;
    font-size: 30rpx;
    font-weight: 0;
    line-height: 42rpx;
  margin-right: 30rpx;
}
.head-img{
  width: 92rpx;
  height: 92rpx;
  //margin-left: 30rpx;
}

//个人信息卡片
.card{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 30rpx;
  .content{
    display: flex;
    flex-direction: column;
    //align-items: ;
    justify-content: space-between;
    height: 92rpx;
    margin-left: 30rpx;
    .content-name{

      font-size: 48rpx;
      color: #333;
      text-align: left;
      letter-spacing: 0.8rpx;
      line-height: 34rpx;
      display: flex;
      flex-direction: row;
      margin-left: 30rpx;
    }
    .content-vip{
      width: 95rpx;
      height: 33rpx;
      // border-radius: 16.5rpx;
      // opacity: 1;
      // border: 0 solid #979797;
      // background: #7355ff;
      // color: #fff;
      // font-size: 24rpx;
	  image {
		  width: 95rpx;
		  height: 33rpx;
	  }
      // img{
      //   width: 24rpx;
      //   height: 24rpx;
      //   background: #ffffff;
      //   margin-left: 20rpx;
      // }
    }
    .content-info{
      width: 502rpx;
      height: 40rpx;
      opacity: 1;
      color: #bbbbbb;
      text-align: left;
      font-size: 28rpx;
      font-weight: 0;
      line-height: 34rpx;
      letter-spacing: 1.03rpx;
      image{
        width: 34rpx;
        height: 24rpx;
        //border-radius: 11.65rpx;
        //opacity: 1;
        //border: 0 solid #979797;
        //background: #ef77b7;
      }
    }
  }
}

.word-text{
  width: 686rpx;
  height: 80rpx;
  opacity: 1;
  color: #919191;
  text-align: left;
  font-size: 28rpx;
  font-weight: 0;
  line-height: 40rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}
.mb45{
  margin-bottom: 45rpx;
}
</style>
